<template>
  <view class="choose-community">
    <view class="current-location">
      <view class="title">
        当前地点
      </view>
      <view class="content">
        <text>{{currentLocation}}</text>
        <view @click="chooseLocation">
          <image src="../../static/icon/locate.png" />
          <text>重新定位</text>
        </view>
      </view>
    </view>

    <view class="community">
      <view class="title">
        附近社区
      </view>
      <u-cell-group>
        <u-cell @click="goToNub(item.title)" v-for="item in communityList" :key="item.id" :title="item.title" isLink>
        </u-cell>
      </u-cell-group>
    </view>

    <map @markertap="onMarker" :scale="16" :markers="markers" id="map" :longitude="location.longitude"
      :latitude="location.latitude"></map>
  </view>
</template>

<script>
  import qqmapwx from '../../utils/initQqMapWx.js'
  export default {
    data() {
      return {
        location: {
          longitude: 0,
          latitude: 0
        },
        markers: [{
          id: 1,
          longitude: 0,
          latitude: 0,
          width: 40,
          height: 40
        }],
        currentLocation: '定位中...',
        communityList: []
      };
    },
    onLoad() {
      // 初始化定位，定位的逻辑中需要用到实例
      this.initLocation()
    },
    methods: {
      goToNub(title) {
        uni.navigateTo({
          url: "/pkg-house/house-number/house-number?title=" + title
        })
      },
      // 初始化定位
      initLocation() {
        // 进行定位
        uni.getLocation({
          type: 'gcj02',
          isHighAccuracy: 'true',
          success: (res) => {
            // console.log(res)

            this.updateLocation(res)
            // 用于坐标解析
            this.initLocationText()
            // 附近搜索
            this.searchCommunity()
          },
          fail(err) {
            console.log(err)
          }
        })
      },
      // 将坐标解析文本
      initLocationText() {
        qqmapwx.reverseGeocoder({
          location: this.location,
          success: (res, data) => {
            // console.log()
            this.currentLocation = res.result.address
          }
        })
      },
      // 重新选择位置
      chooseLocation() {
        uni.chooseLocation({
          ...this.location,
          success: (res) => {
            console.log(res)
            if (!res.name) return
            this.currentLocation = res.name
            this.updateLocation(res)
            // 附近搜索
            this.searchCommunity()
          }
        })
      },
      // 更新地图位置
      updateLocation(res) {
        this.location.longitude = res.longitude
        this.location.latitude = res.latitude
        this.markers[0].longitude = res.longitude
        this.markers[0].latitude = res.latitude
      },
      // 搜索附近小区
      searchCommunity() {
        // console.log(this.location)
        qqmapwx.search({
          location: this.location,
          keyword: '小区住宅',
          page_size: 10,
          success: (res) => {
            console.log(res)
            this.communityList = res.data
            res.data.forEach(item => {
              item.id = item.id - 0
              // item.id 大数 超过了2的53次方
              this.markers.push({
                id: item.id - 0,
                longitude: item.location.lng,
                latitude: item.location.lat,
                width: 20,
                height: 20,
                iconPath: '/static/icon/house.png',
                title: item.title
              })
            })
          }
        })
      },
      onMarker(e) {
        console.log(e)
        const house = this.markers.find((item) => {
          return item.id === e.markerId
        })
        console.log(house)
        // uni.navigateTo({
        // 	url: '/pkg-house/house-number/house-number'
        // })
      }
    }
  }
</script>

<style lang="scss">
  #map {
    width: 750rpx;
    height: 750rpx;
  }

  .choose-community {
    height: 100%;
    background-color: #FAFAFA;

    .current-location {
      .title {
        padding: 0 30rpx;
        line-height: 86rpx;
      }

      .content {
        width: 750rpx;
        height: 102rpx;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        text {
          font-size: 28rpx;
          color: #333;
        }

        view {
          display: flex;
          align-items: center;

          image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 6rpx;
          }

          text {
            color: #5591AF;
          }
        }
      }
    }

    .community {
      .title {
        padding: 0 30rpx;
        line-height: 86rpx;
      }

      ::v-deep .u-cell__body {
        background-color: #fff;
      }
    }
  }
</style>
